<template>
    <view class="sms-container">
        <GZGJHeader title="编辑短信"></GZGJHeader>
        <view class="operation-container">
            <view class="operation-item-container" v-for="(operation, index) in operations" @click="clickOperation(index)">
                <img :src="operation.icon" />
                <text>{{ operation.text }}</text>
            </view>
        </view>
        <view class="sms-body-container">
            <view class="sms-content-container">
                <view class="sms-info-container">
                    <view class="left-contaienr">
                        <span>收件人手机号：</span>
                    </view>
                    <view class="right-container">
                        <input v-model="receiverMobile" type="text" />
                    </view>
                </view>
                <view class="divider"></view>
                <view class="sms-info-container">
                    <view class="left-contaienr">
                        <span>发送设置：</span>
                    </view>
                    <view class="right-container">
                        <uni-data-checkbox selected-color="#E25111" selected-text-color="#666666" v-model="sendSetting" :localdata="sendSettings"></uni-data-checkbox>
                    </view>
                </view>
                <view class="divider"></view>
                <view class="sms-info-content-container">
                    <span>正文：</span>
                    <textarea v-model="content"></textarea>
                    <view class="words-container">
                        <span>当前字数：{{ content.length }}</span>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import GZGJHeader from '@/components/GZGJHeader.vue';
import send from '@/static/img/main/letter/send.png';
import save from '@/static/img/main/letter/save.png';
import reset from '@/static/img/main/letter/reset.png';
import reference from '@/static/img/main/letter/reference.png';
import { onMounted, ref, watch } from 'vue';
const showTopTips = ref(true);
const operations = ref([
    {
        text: '发送',
        icon: send
    },
    {
        text: '保存',
        icon: save
    },
    {
        text: '重置',
        icon: reset
    },
    {
        text: '参考',
        icon: reference
    }
]);
const sendSetting = ref(0);
const sendSettings = ref([
    {
        text: '即时发送',
        value: 0
    },
    {
        text: '定时发送',
        value: 1
    }
]);
const receiverMobile = ref('');
function closeTopTips() {
    showTopTips.value = false;
}
const currentTab = ref(0);
function switchTab(index) {
    currentTab.value = index;
}
const normalTabClass = ref('segment-item-container segment-item-normal');
const selectedTabClass = ref('segment-item-container segment-item-selected');
const content = ref('');
function resetValue() {
    sendSetting.value = 0;
    content.value = '';
    receiverMobile.value = '';
}
function clickOperation(index) {
    if (index === 0) {
    } else if (index === 1) {
    } else if (index === 2) {
        resetValue();
    } else {
    }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.sms-container {
    @extend .column-container-layout;
    justify-content: flex-start;
    background-color: #f7f7f7;
    .operation-container {
        @extend .row-layout;
        height: 60px;
        border-top: 1px solid #dbdbdb;
        background-color: white;
        .operation-item-container {
            @extend .column-container-layout;
            justify-content: center;
            flex: 1;
            img {
                width: 16px;
                height: 16px;
            }
            text {
                font-size: 14px;
                color: #666666;
            }
        }
    }
    .sms-body-container {
        @extend .column-container-layout;
        padding: 15px;
        justify-content: flex-start;
        .sms-content-container {
            @extend .column-container-layout;
            border-radius: 10px;
            padding: 15px;
            background-color: white;
            .sms-info-container {
                @extend .row-layout;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0;
                .left-container {
                    @extend .row-layout;
                    width: 30%;
                    span {
                        font-size: 14px;
                    }
                    .required {
                        color: #e25111;
                    }
                }
                .right-container {
                    @extend .row-layout;
                    justify-content: flex-end;
                    align-items: center;
                    flex: 1;
                    input {
                        font-size: 16px;
                        color: black;
                        text-align: end;
                    }
                    :deep(.uni-data-checklist) {
                        .checklist-group {
                            justify-content: flex-end;
                            .checklist-box {
                                justify-content: flex-end;
                                margin: 0;
                                margin-left: 20px;
                            }
                        }
                    }
                }
            }
            .sms-info-content-container {
                @extend .column-layout;
                justify-content: flex-start;
                align-items: flex-start;
                padding: 15px 0;
                flex: 1;
                textarea {
                    margin-top: 15px;
                    font-size: 16px;
                    flex: 1;
                }
                .words-container {
                    @extend .row-layout;
                    justify-content: flex-end;
                    margin-top: 15px;
                    span {
                        font-size: 10px;
                        color: #aaaaaa;
                    }
                }
            }
        }
    }
}
</style>
